//图文详情页面
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myflutter/life_circle_bean/life_circle_home_entity.dart';
import 'package:myflutter/life_circle_bean/life_cirlce_pic_detail_entity.dart';
import 'package:myflutter/net/api_config.dart';
import 'package:myflutter/net/http_util.dart';
import 'package:myflutter/utils/util.dart';
import 'package:myflutter/utils/widget_util.dart';
import 'package:toast/toast.dart';

//生活圈图文详情
class LifeCircleDetaipPicMainRoute extends StatefulWidget{

   LifeCircleDetaipPicMainRoute(this.lifeCircleHomeDatam,{Key? key}) : super(key: key);

  LifeCircleHomeData? lifeCircleHomeDatam;

  @override
  LifeCirclePicState createState() => LifeCirclePicState();
}

class LifeCirclePicState extends State<LifeCircleDetaipPicMainRoute>{
  @override
  Widget build(BuildContext context){

    return  MaterialApp(
      title: "生活圈图片详情",
      home: Scaffold(
        body: SafeArea(
            child:LifeCirclePicDetailWidget(widget.lifeCircleHomeDatam)),
      ),
    );
  }
}

class  LifeCirclePicDetailWidget extends StatefulWidget{

  LifeCirclePicDetailWidget(this.lifeCircleHomeDatam,{Key? key}) : super(key: key);

  LifeCircleHomeData? lifeCircleHomeDatam;
  @override
  LifeCirclePicDetailState  createState() =>LifeCirclePicDetailState();

}



class LifeCirclePicDetailState extends State<LifeCirclePicDetailWidget>{

  //图文详情
  LifeCirclePicDetailEntity? lifeCirclePicDetailEntity;
  @override
  void initState() {
    //请求接口首页
    WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      //请求详情接口
      _requestPicDetail();
    });
    super.initState();
  }

//请求详情接口
  void _requestPicDetail() async {
    Response response = await HttpUtil.instance.post(ApiConfig.lifecirclepicdetail, data: {'post_id': widget.lifeCircleHomeDatam?.sId,'status':false} ,showLoading: true, context:context);
    if (response.data['code'] == "SUCCESS") {
        lifeCirclePicDetailEntity = LifeCirclePicDetailEntity().fromJson(response.data['data']);
        setState(() {

        });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        LifeCirclePicDeatailTitleWidget(),
        Expanded(child: SingleChildScrollView(child:LifeCirclePicDetailContentWidget(lifeCirclePicDetailEntity),)),
        //  显示点赞 事件 收藏等系信息
        Container(
              padding: const EdgeInsets.only(top: 10,bottom: 10),
            child:Row(
          mainAxisAlignment : MainAxisAlignment.spaceBetween,
          children:  [
            const Text("2020/4/19",style: TextStyle(fontSize: 10,color: Colors.grey),),
            Row(children:[Padding(padding: const EdgeInsets.only(right: 20),child: Row(children: const [Image(image: AssetImage("assets/images/icon_go.png"),width: 10,height: 10,),Padding(padding: EdgeInsets.only(left: 5),child: Text("点赞",style: TextStyle(fontSize: 12,color: Colors.black),),),],),),
              Padding(padding: const EdgeInsets.only(right: 20),child: Row(children: const [Image(image: AssetImage("assets/images/icon_go.png"),width: 10,height: 10,), Padding(padding: EdgeInsets.only(left: 5),child: Text("收藏",style: TextStyle(fontSize: 12,color: Colors.black),),)],),)
              ,Row(children: const [Image(image: AssetImage("assets/images/icon_go.png"),width: 10,height: 10,),Padding(padding: EdgeInsets.only(left: 5),child: Text("评论",style: TextStyle(fontSize: 12,color: Colors.black),),)],)],)
          ],)
        ),
      ],
    );
  }
}

//title布局
class LifeCirclePicDeatailTitleWidget extends StatefulWidget{
  const LifeCirclePicDeatailTitleWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => LifeCirclePicDetailTitleState();
}

class LifeCirclePicDetailTitleState extends State<LifeCirclePicDeatailTitleWidget>{

  @override
  Widget build(BuildContext context) {

    return Padding(padding: const EdgeInsets.only(left: 10,right: 10,top: 10),
      child:Row(
          mainAxisAlignment : MainAxisAlignment.spaceBetween,
          children:[
        GestureDetector(
          onTap: (){
            ToastContext().init(context);
            Toast.show("返回到首页", duration: Toast.lengthShort, gravity:  Toast.center);
          },
          child:const Image(image: AssetImage("assets/images/icon_back.png"),width: 20,height: 15,),),
            const Text("图文详情",style: TextStyle(fontSize: 15,color: Colors.black),),
        const Image(image: AssetImage("assets/images/icon_more.png"),width: 30,height: 15,)
      ]
      ),
    );
  }
}



//内容布局
class LifeCirclePicDetailContentWidget extends StatefulWidget{

  LifeCirclePicDetailContentWidget(this.lifeCirclePicDetailEntity,{Key? key}) : super(key: key);

  LifeCirclePicDetailEntity? lifeCirclePicDetailEntity;
  @override
  State<StatefulWidget> createState() => LifeCirclPicDetailContentState();

}

class LifeCirclPicDetailContentState extends State<LifeCirclePicDetailContentWidget>{

  final _controller =  PageController();
  int _nowIndex = 0;
  List<LifeCirclePicDetailDataImgVideo> imgVideo = [];

  @override
  Widget build(BuildContext context) {
     if(null != widget.lifeCirclePicDetailEntity){
       imgVideo.clear();
       imgVideo.addAll(widget.lifeCirclePicDetailEntity!.imgVideo);
     }
     List<Widget> children =<Widget>[];
    for (int i = 0; i < imgVideo.length; ++i) {
      if(imgVideo[i].coverPic.isNotEmpty) {
        children.add(PicPage(imgVideo[i].coverPic));
      }
    }
    return  Padding(padding: const EdgeInsets.only(left: 10,right: 10,top: 15),
        child:Column(
          crossAxisAlignment : CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment:MainAxisAlignment.spaceBetween,
              children: [Row(
                children: [SizedBox(
                  child: ClipOval(
                    child: WidgetUtil.buildAvatar(widget.lifeCirclePicDetailEntity?.avatar),
                  ),
                  width: 20,
                  height: 20,),
                  Padding(padding: const EdgeInsets.only(left: 5),child: Text(utils.getNickNmae(widget.lifeCirclePicDetailEntity?.nickname)),)
                ],),
                const Text("已关注",)
              ],),
            Container(
                padding: const EdgeInsets.only(top: 20),
                height: 500,
                child:
                Stack(children: [
                  PageView(controller:_controller,children: children,onPageChanged: onPageChanged,),
                  Positioned(
                      top: 15,
                      right: 15,
                      child: Container(
                        //内边距
                        padding: const EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2),
                        //圆角边框
                        decoration: const BoxDecoration(
                          //背景
                            color: Colors.black,
                            //边框圆角
                            borderRadius: BorderRadius.all(Radius.circular(10))),
                        child: Text((_nowIndex+1).toString()+" /"+imgVideo.length.toString(),style: const TextStyle(color: Colors.white),),)
                  )
              ],)
            ),
            //指示器（可以添加点击）
            Row(
                mainAxisAlignment : MainAxisAlignment.center,
                children: List.generate(imgVideo.length, (index) {
                  return Container(
                    margin: const EdgeInsets.all(5),
                    width: 5,
                    height: 5,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: _nowIndex == index
                            ? Colors.red
                            : Colors.black),
                  );
                }).toList()
              ),
            //商铺标题
            Container(
                margin: const EdgeInsets.only(top: 5),
                padding: const EdgeInsets.all(10),
                decoration: BoxDecoration(
                    color:Colors.grey,borderRadius:BorderRadius.circular(5.0)), //3像素圆角
                child:
                Row(
                  mainAxisAlignment : MainAxisAlignment.spaceBetween,
                  children: [
                    Row(children: [Image.network("https://img0.baidu.com/it/u=3365573645,2073973856&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",width: 30,height: 30,),
                      const Padding(padding: EdgeInsets.only(left: 5),child:Text("商铺名称",style: TextStyle(fontSize: 15,color: Colors.black) ,) ,)],),
                    const Image(image: AssetImage("assets/images/icon_go.png"),width: 20,height: 20,)
                  ],
                )
            ),
             Padding(padding:const EdgeInsets.only(top: 10),child: Text(widget.lifeCirclePicDetailEntity?.title ?? "标题",style: const TextStyle(color: Colors.black,fontSize: 14),),),
            //详情内容
             Padding(padding:EdgeInsets.only(top: 5),child: Text(widget.lifeCirclePicDetailEntity?.content??"文案",style: const TextStyle(color: Colors.black,fontSize: 12),),),
          ],)
    );
  }

//  pageview改变

  //Page页面改变监听
  void onPageChanged(int pageIndex){
     setState(() {
       _nowIndex = pageIndex % imgVideo.length;

    });
  }
}

//详情图片page
 class PicPage extends StatefulWidget{

   PicPage(this.imagviewUrl,{Key? key}) : super(key: key);

   String defalutImagviewUrl ="https://img0.baidu.com/it/u=3365573645,2073973856&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
  //图片地址
  String? imagviewUrl;

  @override
  State<StatefulWidget> createState() => _PicPageState();
 }
 class _PicPageState extends State<PicPage>{
  @override
  Widget build(BuildContext context) {

      return ClipRRect(borderRadius:BorderRadius.circular(7.0),
        child:FadeInImage(fit :BoxFit.fill,placeholder:const AssetImage("assets/images/icon_placeholder.gif"),image: NetworkImage( widget.imagviewUrl?? widget.defalutImagviewUrl),
      imageErrorBuilder : (context, error, stackTrace) {
    return Container(
    child: Image.asset("assets/images/icon_error.png",fit: BoxFit.fill,),
    height: 500,
    color: Colors.grey,
     );}
     )
    );
  }

 }

